<template>
  <page-header-wrapper>
    <a-spin :spinning="loading">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="4" :sm="24">
              <a-form-item>
                <a-input placeholder="请输入门店名称" v-model="queryParam.name" />
              </a-form-item>
            </a-col>
            <a-col :md="3" :sm="24">
              <a-form-item label="地区">
                <a-select v-model="queryParam.provinceid" placeholder="省" @change="onProvinceChange($event, 'form')">
                  <a-select-option :value="item.provinceid" v-for="item in provinceList" :key="item.provinceid">{{
                      item.province
                    }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="2" :sm="24">
              <a-form-item>
                <a-select v-model="queryParam.cityid" placeholder="市" @change="onCityChange($event, 'form')">
                  <a-select-option :value="item.cityid" v-for="item in cityList" :key="item.cityid">{{
                      item.city
                    }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="2" :sm="24">
              <a-form-item>
                <a-select v-model="queryParam.area" placeholder="区">
                  <a-select-option :value="item.area" v-for="item in areaList" :key="item.area">{{
                      item.area
                    }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="loadStoreData" icon="search">查询</a-button>
                <a-button type="primary" @click="handleReset" icon="search" style='margin-left: 8px'>重置</a-button>
              </span>
            </a-col>
            <a-col :md="1" :sm="24" :offset="7">
              <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
       <a-empty v-if='!storeList.length'/>
      <a-row :gutter="[24, 24]" style="margin:0">
        <a-col
          :xxl="4"
          :xl="5"
          :lg="7"
          :md="8"
          :sm="24"
          v-for="(item, index) in storeList"
          :key="item.id"
        >

          <a-card
            :title="item.name"
            :bordered="false"
            hoverable
            class="store-item"
            ref="storeItem"
            :loading="loading">
            <div style="position:absolute;z-index: 999;background-color: rgba(0,0,0,0.4);color: #ffffff;display: flex;width: 80%;height: 40px;
             border-radius:0 0 20px 20px;align-items: center;justify-content: center" v-if="judge(item.upkeep_time)&&userInfo.type === 1">
              <div style="color: #F8A022;font-size: 16px">系统还有
                <label style="color: red;margin: 0 2px 0 2px;">{{judge(item.upkeep_time)}}</label>
                天到期</div>
            </div>
            <img src="~@/assets/store.png" style="width:100%;height:auto;" />
            <div class="store-btn-container" @click="$emit('go', item)">
              <div class="store-btns" @click.stop="">
                <a-button type="primary" size="small" shape="round" @click.stop="handleEditStore(item, index)">
                  <a-icon type="edit"></a-icon>
                </a-button>
                <a-button type="primary" size="small" shape="round" @click.stop="handleDelete(item)">
                  <a-icon type="delete"></a-icon>
                </a-button>
                <a-button type="primary" size="small" shape="round" @click.stop="handleWallet(item)">
                  <a-icon type="wallet"></a-icon>
                </a-button>
                <a-button type="primary" size="small" shape="round" @click.stop="handleStat(item)">
                  <a-icon type="area-chart"></a-icon>
                </a-button>
              </div>
            </div>
            <a slot="extra" href="#" v-if="item.pid > 0">网点</a>
          </a-card>

          <!--<div v-if="judge(item.upkeep_time)&&userInfo.type === 1" style="display: flex;margin-bottom: 10px;justify-content: space-between">
            <div style="color: #F8A022">系统还有
              <label style="color: red;margin: 0 2px 0 2px;">{{judge(item.upkeep_time)}}</label>
              天到期</div>
            <div v-if="userInfo.type === 1" style="color: #0FA4FE;" @click.stop="">续费</div>
          </div>-->
        </a-col>
      </a-row>
      <create-form
        ref="createModal"
        @cancel="handleCancelStore"
        :editAction="storeEdit"
        :addAction="storeAdd"
        @ok="loadData"
      />
    </a-spin>
  </page-header-wrapper>
</template>

<script>
import CreateForm from './modules/storeForm'
import formTableMixin from '@/mixins/formTableMixin'
import { areaLink, cityLink, provinceLink } from '@/api/notControl'
import {mapGetters} from "vuex";

export default {
  name: 'StoreList',
  mixins: [formTableMixin],
  props: {
    getStoreList: {
      type: Function,
      default: () => {}
    },
    storeEdit: {
      type: Function,
      default: () => {}
    },
    storeAdd: {
      type: Function,
      default: () => {}
    },
    storeType: {
      type: String,
      default: 'clothes'
    },
    storeDel: {
      type: Function,
      default: () => {}
    }
  },
  components: {
    CreateForm
  },
  data () {
    this.delAction = this.storeDel
    this.listAction = this.getStoreList
    return {
      storeList: [],
      loading: false,
      cityList: [],
      provinceList: [],
      areaList: [],
    }
  },
  created () {
    this.loadStoreData()
    provinceLink().then(res => {
      this.provinceList = res.data
    })
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    loadStoreData(parameter) {
      this.loading = true
      this.loadData().then(res => {
        this.storeList = res.data
        this.loading = false
      })
    },
    onProvinceChange (provinceid, formId) {
      return cityLink({ provinceid }).then(res => {
        this.cityList = res.data
        this.queryParam.cityid =  undefined
        this.queryParam.province = this.provinceList.find(item=>item.provinceid === provinceid).province
      })
    },
    onCityChange (cityid, formId) {
      return areaLink({ cityid }).then(res => {
        this.areaList = res.data
        this.queryParam.areaid =  undefined
        this.queryParam.city = this.cityList.find(item=>item.cityid === cityid).city
      })
    },
    goClothesOrder (item) {
      this.$router.push({
        name: 'clothesOrder',
        params: { store_id: item.id }
      })
    },
    handleEditStore (record, index) {
      this.currentStoreIndex = index
      this.handleEdit(record)
    },
    handleCancelStore () {
      // 解决当关闭弹窗时,当前选择的元素会上移的bug
      this.$nextTick(() => {
        setTimeout(() => {
          const store = this.$refs['storeItem'][this.currentStoreIndex]
          if (store) {
            store.$el.scrollTop = 0
          }
        }, 0)
      })
    },
    handleWallet (value) {
      this.$router.push({
        name: 'storeWalletDetail',
        query: {
          id: value.id,
          type: this.storeType,
          walletType: 'store'
        }
      })
    },
    handleStat (value) {
      this.$router.push({
        name: 'storeStat',
        query: {
          id: value.id,
          type: this.storeType
        }
      })
    },
    judge(date){
      // 获取当前日期
      const targetDate = new Date(date);
      if(targetDate==null) return false;
      const currentDate = new Date();
      // 将当前日期与指定日期相减，得到相差的天数
      const diffDays = Math.ceil((targetDate.getTime() - currentDate.getTime()) / (1000 * 60 * 60 * 24));
      // 判断相差的天数是否在0到30之间
      if (diffDays >= 0 && diffDays <= 30) {
        return diffDays;
      }else {
        return false;
      }
    },

  }
}
</script>

<style lang="less" scoped>
/deep/.store-item {
  position: relative;
  // contain: paint;
  overflow-y: hidden;
  scroll-behavior: smooth;
  &:hover .store-btn-container {
    transform: translate3d(0, 0, 0);
  }
  .store-btn-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(~@/assets/store-white.png);
    transition: all 0.3s;
    transform: translate3d(0, 100%, 0);
    .store-btns {
      position: absolute;
      bottom: 18px;
      left: 0;
      right: 0;
      padding: 0 11px;
      display: flex;
      justify-content: space-around;
    }
  }
}
</style>
